<template>
  <div class="carCount">
	  <u-navbar :is-back="false" title="车上库存"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
    <view class="app-head">
      <u-dropdown
        ref="uDropdown">
        <u-dropdown-item
          :title="className"
          :options="types"
          @change="classChange">
        </u-dropdown-item>
      </u-dropdown>
      <u-search
        v-model="form.Key"
        @change="getList">
      </u-search>
    </view>
    <view class="iconfont">
      <u-empty text="暂无数据"
        mode="list"
        v-if="!clist.length">
      </u-empty>
      <app-product
        v-for="(item,index) in clist"
        :li="item"
        :key="index">
      </app-product>
    </view>
  </div>
</template>
<script>
import appProduct from 'components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      className: '筛选',
      types: [],
      clist: [],
      isAllList: true,
      form: {
        CarId: 0,
        Key: '',
        ProClassId: 0
      }
    }
  },
  onShow() {
    this.defaultData()
    this.getList()
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getList()
  },
  methods: {
    defaultData() {
      this.isAllList = true
      this.page = 1
      this.clist = []
	 
    },
    classChange(e) {
      this.className = this.types.find(x => x.value === e).label
      this.form.ProClassId = e
       this.defaultData()
       this.getList()
     
    },
    getList() {
      this.$axios('api/CarProStock/ListPaged', 'post', {
        pageIndex: this.page,
        value: this.form
      }).then(res => {
        if (!res.Value.length) this.isAllList = false

        let list = res.Value.List.map(x => ({
          avatar: this.$api.OrderImg(x.fProId),
          gname: x.fProName,
          id: x.fProId,
          details: [
			  {
			    label: '散装（'+ x.fUnit + '）',
			    value: x.fCount
			  },
           
			{
			    label: '整装 ('+ x.fPackUnit+')',
			    value: x.fPackCount
			  },
		 
			{
			  label: '到期时间',
			  value: x.fOverTime
			}
          ]
        }))
        this.clist.push(...list)
      })
    }
  },
  created() {
    this.$axios('api/ProClassBasic/GetList', 'post', {
      value: 0
    }).then(res => {
      let list = res.Value.map(x => ({
        label: x.fClassName,
        value: x.fClassId
      }))
      this.types = list
    })
  }
}
</script>
